import './ContractInformationDetails.scss'

import ScrollView from 'devextreme-react/scroll-view'
import { UploadOutlined } from '@ant-design/icons';

import { Collapse, Button, Upload, message } from "antd"

import { Http } from '../../Utils/Api'
import { useMount } from 'ahooks';


// https://coze.tonzoc.com.cn/universal  通用ai接口

const Mapping = {
    '01': { icon: 'ContractImage01', label: '建议书', prompt: '提取合同金额' },
    '02': { icon: 'ContractImage02', label: '询价比价', prompt: '提取合同金额' },
    '03': { icon: 'ContractImage03', label: '可研报告', prompt: '提取合同金额' },
    '04': { icon: 'ContractImage04', label: '专家评审', prompt: '提取合同金额' },
    '05': { icon: 'ContractImage05', label: '决策', prompt: '提取合同金额' },
    '06': { icon: 'ContractImage06', label: '审批', prompt: '提取合同金额' },

    '11': { icon: 'ContractImage11', label: '合同对比', prompt: '提取合同金额' },
    '12': { icon: 'ContractImage12', label: '合同审查', prompt: '提取合同金额' },
    '13': { icon: 'ContractImage13', label: '履约', prompt: '提取合同金额' },
    '14': { icon: 'ContractImage14', label: '付款', prompt: '提取合同金额' },
    '15': { icon: 'ContractImage15', label: '进度', prompt: '提取合同金额' },
    '16': { icon: 'ContractImage16', label: '清单', prompt: '提取合同金额' },

    '21': { icon: 'ContractImage21', label: '验收', prompt: '提取合同金额' },
}



const LableTemplate = ({ type, number }) => {
    const imageUrl = sessionStorage.getItem('IMAGE')


    const props = {
        name: 'file',
        action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
        headers: { authorization: 'authorization-text' },
        showUploadList: false,
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
        onClick(e) { e.stopPropagation() }
    };


    return (
        <div className='LableTemplate'>
            <div>
                <img src={`${imageUrl}${Mapping[type].icon}.png`} alt="" />
                <div>{Mapping[type].label}</div>
            </div>
            <Upload {...props}>
                <Button type='link' icon={<UploadOutlined />} >上传附件  ({number || 0})</Button>
            </Upload>
        </div>
    )
}

const ChildrenTemplate = ({ type }) => {
    const list = [
        {
            uuid: 1,
            label: 'PPP项目合同PPP项目合同PPP项目合同PPP项目合同PPP项目合同PPP项目合同PPP项目合同PPP项目合同PPP项目合同PPP项目合同.docx',
            url: "https://gjeq-rest.ljkjkf.com/api/static/20251017/6e5fed49-e25a-4ce4-85dc-93f1bee63d64.pdf"
        },
        {
            uuid: 2,
            label: 'PPP项目合同.docx',
            url: "https://gjeq-rest.ljkjkf.com/api/static/20251017/6e5fed49-e25a-4ce4-85dc-93f1bee63d64.pdf"
        },
        {
            uuid: 3,
            label: 'PPP项目合同.docx',
            url: "https://gjeq-rest.ljkjkf.com/api/static/20251017/6e5fed49-e25a-4ce4-85dc-93f1bee63d64.pdf"
        },
    ]


    const onClickDetails = (item) => {
        console.log('点击事件', item)
        message.success(`打开附件 ${item.url}`);
    }

    return (
        <div className='ChildrenTemplate'>
            {list.map(item => {
                return (
                    <div key={item.uuid} onClick={() => onClickDetails(item)}>
                        <div>{item.label}</div>
                        <Button type='link' danger>删除</Button>
                    </div>
                )
            })}
        </div>
    )
}


const ContractInformationDetails = ({ uuid }) => {
    const imageUrl = sessionStorage.getItem('IMAGE')
    const numberData = {
        '01': 16,
        '02': 2
    }

    const itemsA01 = [
        { key: '01', label: <LableTemplate type='01' number={numberData['01']} />, children: <ChildrenTemplate type='01' /> },
        { key: '02', label: <LableTemplate type='02' />, children: <ChildrenTemplate type='02' /> },
        { key: '03', label: <LableTemplate type='03' />, children: <ChildrenTemplate type='03' /> },
        { key: '04', label: <LableTemplate type='04' />, children: <ChildrenTemplate type='04' /> },
        { key: '05', label: <LableTemplate type='05' />, children: <ChildrenTemplate type='05' /> },
        { key: '06', label: <LableTemplate type='06' />, children: <ChildrenTemplate type='06' /> },
    ];

    const itemsA02 = [
        { key: '11', label: <LableTemplate type='11' />, children: <ChildrenTemplate type='11' /> },
        { key: '12', label: <LableTemplate type='12' />, children: <ChildrenTemplate type='12' /> },
        { key: '13', label: <LableTemplate type='13' />, children: <ChildrenTemplate type='13' /> },
        { key: '14', label: <LableTemplate type='14' />, children: <ChildrenTemplate type='14' /> },
        { key: '15', label: <LableTemplate type='15' />, children: <ChildrenTemplate type='15' /> },
        { key: '16', label: <LableTemplate type='16' />, children: <ChildrenTemplate type='16' /> },
    ];

    const itemsA03 = [
        { key: '21', label: <LableTemplate type='21' />, children: <ChildrenTemplate type='21' /> },
    ];


    // useMount(async () => {
    //     const res = await Http({ method: 'get', url: 'contractInformation', params: { uuid } })
    //     console.log(res)
    // })


    return (
        <div className='ContractInformationDetails'>
            <div className='Top'>
                合同主体信息
            </div>
            <div className='Btm'>
                <div className='List'>
                    <div className='Title'>
                        <img src={imageUrl + 'ContractTitle01.png'} alt="" />
                        <div>事前</div>
                    </div>
                    <ScrollView
                        scrollByContent={true}
                        scrollByThumb={true}
                        height='100%'
                        width='100%'
                        direction="vertical"
                        showScrollbar='onHover'
                    >
                        <div className='View'>
                            <Collapse items={itemsA01} />
                        </div>
                    </ScrollView>
                </div>
                <div className='List'>
                    <div className='Title'>
                        <img src={imageUrl + 'ContractTitle02.png'} alt="" />
                        <div>事前</div>
                    </div>
                    <ScrollView
                        scrollByContent={true}
                        scrollByThumb={true}
                        height='100%'
                        width='100%'
                        direction="vertical"
                        showScrollbar='onHover'
                    >
                        <div className='View'>
                            <Collapse items={itemsA02} />
                        </div>
                    </ScrollView>
                </div>
                <div className='List'>
                    <div className='Title'>
                        <img src={imageUrl + 'ContractTitle03.png'} alt="" />
                        <div>事前</div>
                    </div>
                    <ScrollView
                        scrollByContent={true}
                        scrollByThumb={true}
                        height='100%'
                        width='100%'
                        direction="vertical"
                        showScrollbar='onHover'
                    >
                        <div className='View'>
                            <Collapse items={itemsA03} />
                        </div>
                    </ScrollView>
                </div>
            </div>
        </div>
    );
};

export default ContractInformationDetails;